<template>
	<view>
		<uni-section>
			<view class="posChoic" @tap="orderbyChange" :class="{ 'text-theme': hasChoose }">
				<span></span>
				筛选按钮
			</view>
			<fjj-condition ref="condition" @touchmove.stop :color="color" :list="menuList" :defaultValue="defaultValue" @result="resultConditon" />
			<uni-search-bar
				placeholder="请输入要搜索的名称"
				@confirm="search"
				:focus="true"
				v-model="searchValue"
				@blur="blur"
				@focus="focus"
				@input="input"
				@cancel="cancel"
				@clear="clear"
			></uni-search-bar>
			<uni-list>
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item
						v-for="(item, index) in tableData"
						:right-options="item.state == 1 ? options1 : ''"
						:key="item.id"
						@change="swipeChange($event, index)"
						@click="swipeClick($event, item)"
					>
						<uni-list-item
							:title="item.title"
							:note="item.createTime"
							link="navigateTo"
							to="/pages/work/CustomsDeclaration/detail"
							showArrow
							clickable
							:rightText="item.worderClass.typeName"
							@click="ToDetail(item)"
						/>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
import { MyCustoms, updateState, getWorkclass, delMyworkInfo } from '@/api/system/user.js';
import store from '@/store/index.js';
export default {
	data() {
		return {
			gridForm: [
				{ value: 1, title: '待派发' },
				{ value: 2, title: '待处理' },
				{ value: 3, title: '处理中' },
				{ value: 4, title: '待评价' },
				{ value: 5, title: '已完结' }
			],
			options1: [
				{
					text: '修改',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '撤销',
					style: {
						backgroundColor: '#F56C6C'
					}
				}
			],
			cover: 'http://116.148.228.110:9000/Upload/covers/20240204/20240204_170721_7458_199%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240204170518.png',
			cardTitle: '待派发',
			Wstate: '',
			UserId: '',
			Wdata: '', //总数据
			tableData: [],
			// 每页数据量
			pageSize: 10,
			// 当前页
			pageCurrent: 1,
			// 数据总量
			total: 0,
			loading: false,
			StateData1: [],
			StateData2: [],
			StateData3: [],
			StateData5: [],
			CardData: '',
			current: '',
			searchValue: '',
			choiceDetail: '',
			cusData: '',
			searchData: [],
			orderClass: '',
			dataRange: {},
			orderClassData: [
				{
					title: '多选选项1',
					value: '1',
					isSelected: true
				},
				{
					title: '多选选项2',
					value: '2'
				},
				{
					title: '多选选项3',
					value: '3'
				}
			],
			color: '#4D7BFE',
			hasChoose: false,
			menuList: [],
			defaultValue: {}
			// OrderStatus: ''
		};
	},
	onShow() {
		this.getmyWorktodo();
	},
	onLoad() {
		this.getmyWorktodo();
		setTimeout(() => {
			this.menuList = [
				{
					title: '工单状态',
					type: 'custom',
					key: 'custom2',
					isMutiple: false, //多选
					detailList: this.gridForm
				},
				{
					title: '工单类型多选',
					type: 'custom',
					key: 'custom1',
					isMutiple: true, //多选
					detailList: this.orderClassData
				},
				{
					title: '日期范围',
					type: 'range',
					key: 'time1',
					minName: 'time1MinName',
					maxName: 'time1MaxName'
				}
			];
			this.defaultValue = {
				// custom1: ['1', '2'],
				// time1: ['2021/02/01', '2021/02/03']
			};
		}, 2000);
	},
	// onLoad() {
	// 	this.getmyWorktodo();
	// },
	methods: {
		getmyWorktodo(pageCurrent) {
			this.loading = true;
			this.pageCurrent = pageCurrent;
			try {
				this.UserId = uni.getStorageSync('userID');
				if (this.UserId) {
					console.log(this.UserId);
				}
			} catch (e) {
				// error
			}
			const that = this;
			getWorkclass().then((res) => {
				// that.orderClass = res.data;
				that.orderClass = res.data.filter((item) => item.pId > 0);
				that.orderClassData = that.orderClass.map((b) => {
					return {
						title: b.typeName,
						value: b.typeId
					};
					// that.orderClassData.title = b.typeName;
					// that.orderClassData.value = b.typeId;
				});
				// console.log('orderClassData', that.orderClassData);
			});
			MyCustoms('1', '10000', that.UserId, that.Wstate, that.dataRange).then((res) => {
				// console.log(res.rows);
				that.cusData = res.rows;
				// that.cusData.map((t) => {
				// 	that.orderClass.map((b) => {
				// 		t.worderClass.
				// 	})
				// })
				that.tableData = that.cusData;
				that.total = res.total;
				that.loading = false;
			});
		},
		change(e) {
			// this.$refs.table.clearSelection();
			// this.selectedIndexs.length = 0;
			// console.log('e.current:', e.current);
			this.getmyWorktodo(e.current);
		},
		// WDistribution(state) {
		// 	console.log('state', state);
		// 	this.Wstate = state;
		// 	this.getmyWorktodo();
		// 	this.pageCurrent = 1;
		// },
		ToDetail(b) {
			// this.$tab.navigateTo('/pages/work/CustomsDeclaration/detail');
			store.state.CusImform = b;
			console.log('store.state.CusImform:', store.state.CusImform);
		},
		search(res) {
			// console.log(res);
			var that = this;
			that.searchData = [];
			that.tableData.map((t) => {
				if (t.title.indexOf(res.value) > -1) {
					that.searchData.push(t);
					// console.log('t.title:', t.title);
				}
			});
			that.tableData = that.searchData;
			// uni.showToast({
			// 	title: '搜索：' + res.value,
			// 	icon: 'none'
			// });
		},
		input(res) {
			this.tableData = this.cusData;
			// console.log('----input:', that.searchData);
		},
		clear(res) {
			this.tableData = this.cusData;
			// uni.showToast({
			// 	title: 'clear事件，清除值为：' + res.value,
			// 	icon: 'none'
			// });
		},
		blur(res) {
			// uni.showToast({
			// 	title: 'blur事件，输入值为：' + res.value,
			// 	icon: 'none'
			// });
		},
		focus(e) {
			// uni.showToast({
			// 	title: 'focus事件，输出值为：' + e.value,
			// 	icon: 'none'
			// });
		},
		cancel(res) {
			this.tableData = this.cusData;
			// uni.showToast({
			// 	title: '点击取消，输入值为：' + res.value,
			// 	icon: 'none'
			// });
		},
		swipeChange(e, index) {
			// console.log('返回：', e);
			// console.log('当前索引：', index);
		},
		swipeClick(e, item) {
			let { content } = e;
			if (content.text === '修改') {
				// this.popValue = item.content;
				store.state.myInform = item;
				uni.navigateTo({
					url: `/pages/work/SubOrder?id=${item.id}`
				});
				// this.$tab.navigateTo('/pages/work/SubOrder');
				console.log('item', item);
			} else if (content.text === '撤销') {
				delMyworkInfo(item.id).then((res) => {
					console.log('撤销成功', res);
					this.getmyWorktodo();
				});
			}
		},
		resultConditon(obj) {
			this.$refs.condition.visibleDrawer = false;
			this.hasChoose = obj.hasChoose;
			console.log(obj);
			if (obj.result.time1) {
				this.dataRange['beginTime'] = obj.result.time1[0];
				this.dataRange['endTime'] = obj.result.time1[1];
				this.getmyWorktodo();
			}
			if (obj.result.custom2) {
				this.Wstate = obj.result.custom2;
				this.getmyWorktodo();
			} else {
				this.Wstate = '';
				this.getmyWorktodo();
			}

			console.log(this.dataRange);
			this.choiceDetail = [];
			setTimeout(() => {
				if (obj.result.custom1 == '') {
					this.tableData = this.cusData;
				} else {
					obj.result.custom1.map((id) => {
						this.tableData.map((item) => {
							if (id == item.worderClass.typeId) {
								this.choiceDetail.push(item);
							}
						});
					});

					// console.log('choiceDetail', this.choiceDetail);
					this.tableData = this.choiceDetail;
				}
			}, 500);
		},
		orderbyChange(obj) {
			// this.tableData = this.cusData;
			this.$refs.condition.visibleDrawer = true;
		}
	}
};
</script>

<style lang="scss">
.grid-item-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.uni-grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}
/* .uni-list {
	align-items: center;
	height: 50px;
} */
.btnOrder {
	height: 50%;
}
.posChoic {
	position: absolute;
	top: 0;
	right: 0;
}
.uni-section {
	position: relative;
}
</style>
